﻿import QtQuick 2.12
import QtQuick.Controls 2.12

Switch {
    id: controlRoot

    //按钮样式
    property color  buttonBgOnColor:"#209FDF"
    property color  buttonBgOffColor:"white"
    property color  buttonBorderOnColor:buttonBgOnColor
    property color  buttonBorderOffColor:"#cccccc"

    //滑块样式
    property color  sliderBgOnColor:"white"
    property color  sliderBgOffColor:"white"
    property color  sliderBgDownColor:sliderBorderOffColor
    property color  sliderBorderOnColor:buttonBgOnColor
    property color  sliderBorderOffColor:"#999999"

    width: 100
    height:40

    indicator: Rectangle {
        id:indicatorBack
        width: controlRoot.width
        height: controlRoot.height
        x: controlRoot.leftPadding
        y: parent.height / 2 - height / 2
        radius:Math.floor(indicatorBack.height/2)
        color: controlRoot.checked ? buttonBgOnColor : buttonBgOffColor
        border.color: controlRoot.checked ? buttonBorderOnColor: buttonBorderOffColor

        Rectangle {
            x: controlRoot.checked ? parent.width - width : 0
            width: indicatorBack.height
            height: indicatorBack.height
            radius: Math.floor(indicatorBack.height/2)
            color: controlRoot.checked ?(controlRoot.down ? sliderBgDownColor :sliderBgOnColor):sliderBgOffColor
            border.color: controlRoot.checked ?sliderBorderOnColor: sliderBorderOffColor

            Behavior on x {
                PropertyAnimation{
                    property: "x"
                    duration: 200
                }
            }
        }
    }
}
